<template>
  <div class="page" style="height: calc(100vh - 125px)">
    <div class="page-brand">成品视频</div>
    <div class="container flex">
      <Registory
        @refresh="getList()"
        @getCategory="(value) => (currentRegistory = value)"
      />
      <div class="right-container g-card">
        <div class="flex-b align-center w-100">
          <div class="flex align-center">
            <mao-checkbox v-if="pageParam.total&&currentRegistory.id!='0'" v-model="selectAllFile" style="margin-right: 30px">
              <span style="font-size: 14px;">全选</span>
            </mao-checkbox>
            <div class="link count">素材数量：共{{ pageParam.total }}个</div>
          </div>
          <div v-if="currentRegistory.id!='0'" class="flex-e align-center">
            <el-button type="primary" size="small" @click="openAddVideoModal">
              <div class="flex-c align-center">
                <i
                  class="el-icon-video-camera"
                  style="font-size: 14px; margin-right: 4px"
                />
                上传视频
              </div>
            </el-button>
            <el-button
              v-if="videoList.length"
              style="margin-left: 10px"
              type="danger"
              size="small"
              @click="batchDel"
            >
              <div class="flex-c align-center">
                <i
                  class="el-icon-delete"
                  style="font-size: 14px; margin-right: 4px"
                />
                删除素材
              </div>
            </el-button>
          </div>
        </div>
        <div class="video-list w-100" :style="{'margin-top':currentRegistory.id!='0'?0:'15px'}">
          <div
            v-for="(item, index) in videoList"
            :key="item.name"
          >
            <image-item
              v-if="item.productType === 'picture'"
              :item="item"
              :select-all-file="selectAllFile"
              :registory="currentRegistory"
              :editable="currentRegistory.id!='0'"
              :index="index"
              @refresh="getList()"
            />
            <video-item
              v-if="item.productType=== 'video'"
              :item="item"
              :select-all-file="selectAllFile"
              :index="index"
              :registory="currentRegistory"
              :editable="currentRegistory.id!='0'"
              @refresh="getList()"
            />
          </div>
        </div>
        <div class="pagination-box">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageParam.pageSize"
            :total="pageParam.total"
            hide-on-single-page
            @current-change="getList"
          />
        </div>
      </div>
    </div>

    <AddVideoModal
      v-if="currentRegistory && currentRegistory.id"
      ref="addVideoModal"
      :category-id="currentRegistory.id.toString()"
      @get="getList"
      @refresh="getList"
    />
    <AddDirModal ref="addDirModal" @get="addDirList" />
    <DelFileModal
      ref="delFileModal"
      :table-data="videoList"
      @refresh="getList()"
    />
  </div>
</template>

<script>
import AddVideoModal from './components/AddVideoModal.vue'
import AddDirModal from './components/AddDirModal.vue'
import DelFileModal from './components/DelFileModal.vue'
import VideoItem from './components/VideoItem.vue'
import ImageItem from './components/ImageItem.vue'
import Registory from '../components/Registory.vue'
import { getList } from '@/api/product'
import MaoCheckbox from '@/components/MaoCheckbox'

export default {
  name: 'ElementProductIndex',
  components: {
    AddVideoModal,
    VideoItem,
    AddDirModal,
    DelFileModal,
    Registory,
    ImageItem,
    MaoCheckbox
  },
  data() {
    return {
      videoList: [],
      selectAllFile: false,
      pageNo: 1,
      total: 0,
      currentRegistory: {},
      pageParam: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    currentRegistory: {
      handler(val) {
        if (val && val.id) {
          console.log('val', val)
          this.getList()
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    async getList(pageNo = 1) {
      this.selectAllFile = false
      this.pageParam.pageNo = pageNo
      if (this.currentRegistory && this.currentRegistory.id) {
        const res = await getList({
          productCategoryId: this.currentRegistory.id,
          pageNo: this.pageParam.pageNo,
          pageSize: this.pageParam.pageSize
        })
        if (res.success) {
          const { total, records } = res.result
          this.pageParam.total = total
          this.videoList = records
        } else {
          this.$message.error(res.message)
        }
      }
    },

    batchDel() {
      if (!this.selectAllFile) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
        return
      }
      this.$refs.delFileModal.open()
    },

    openAddVideoModal() {
      this.$refs.addVideoModal.open()
    },
    addDirList() {}
  }
}
</script>
<style lang="scss" scoped>
.card-name {
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
}
.card-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 0.94);
  margin-top: 16px;
}
.dialog-title {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
  margin-left: 12px;
}
.dialog-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-video-list {
  .video-item {
    .img {
      width: 70px;
      height: 70px;
      border-radius: 15px;
    }
  }
}
.video-list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap:30px;
}
.uplod-box {
  width: 90px;
  height: 90px;
  border-radius: 5px;
  border: 0.5px dashed rgba(128, 128, 128, 1);
  margin-right: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  .upload {
    width: 28px;
    margin-bottom: 6px;
  }
}

.mb {
  margin-bottom: 15px;
}
.container {
  .right-container {
    width: calc(100% - 330px);
    overflow: hidden;
    .count {
      font-size: 14px;
    }
  }
}
.dir-list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap:30px;
}
</style>

